import React from 'react'
import fetch from 'isomorphic-fetch'
import { Input, Button, notification } from 'antd';

var storage = window.localStorage;
var user=JSON.parse(storage.user||'{}')

class ResetPassword extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    formdata: { username: "", password: "", passwordconfirm: "" }
  }

  handlechange_normal = (key, e) => {
    let data = Object.assign({}, this.state.formdata, { [key]: e.target.value });
    this.setState({ formdata: data })
  };

  //通用提醒
  openNotification = (text) => { notification.open({ message: '提示', description: text, onClick: () => { }, }); };

  updatePassword = () => {
    const { setIfxgmm } = this.props;
    if (this.state.formdata.password !== this.state.formdata.passwordconfirm) {
      this.openNotification("两次输入密码不一致")
      return false;
    }
    if(!/^(?=[\S\s]{6,20}$)[^'"]*$/.test(this.state.formdata.password)){
      this.openNotification("密码不合要求")
      return false;
    }
    this.state.formdata={
      ...this.state.formdata,
      id:user.id
    }
    fetch("/admin/user/updatePassword", {
      method: 'POST',
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ "data": this.state.formdata })
    }).then(response => {
      return response.json();
    }).then(data => {
      if (data.code == 201) {
        this.openNotification("验证不通过，登录失败")
      } else if (data.code == 200) {
        this.openNotification(`密码修改成功!`)
        setIfxgmm(false)
      }
    });
  }

  handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      this.handlelogin()
    }
  }

  componentDidMount() {
    document.addEventListener('keydown', this.handleKeyDown);
    this.setState({
      formdata: { username: storage.ygbh, password: "", passwordconfirm: "" }
    })
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyDown);
  }

  render() {
    return (
      <div >
        <div style={{
          width: "100%",  position: "relative", fontSize: "2vw", textAlign: "center", color: "white", 
        }}>
          <div style={{
            backgroundColor: "", position: "relative", color: "black", fontSize: "0.9vw", fontWeight: "800",
            width: "95%",  height: "1vw", textAlign: "left", marginTop: "5vh"
          }}>
            登陆人姓名
          </div>
          <Input style={{
            backgroundColor: "white", position: "relative",
            width: "95%", left: "0", right: "0", margin: "2.5%", height: "2vw"
          }} disabled
            placeholder="姓名获取异常" value={user.name} />
          <div style={{
            backgroundColor: "", position: "relative", color: "black", fontSize: "0.9vw", fontWeight: "800",
            width: "95%",  height: "1vw", textAlign: "left", marginTop: "1vh"
          }}>
            员工账号
          </div>
          <Input style={{
            backgroundColor: "white", position: "relative",
            width: "95%", left: "0", right: "0", margin: "2.5%", height: "2vw"
          }} disabled
            placeholder="账号获取异常" value={user.account} />
          <br />
          <div style={{
            backgroundColor: "", position: "relative", color: "#287FFF", fontSize: "0.9vw", fontWeight: "800",
            width: "95%",  height: "1vw", textAlign: "left", marginTop: "1vh"
          }}>
            输入新密码
          </div>
          <Input style={{height:"0",padding:"0",border:"none",margin:"0",width:"0"}}/>
          <Input.Password maxLength={20}
            autoComplete="new-password"
            style={{
              position: "relative", width: "95%", left: "0", right: "0", margin: "2.5%", height: "2vw"
            }} value={this.state.formdata.password}
            placeholder="请输入您的新密码" onChange={e => this.handlechange_normal("password", e)} />
          <br />
          <div style={{
            backgroundColor: "", position: "relative", color: "#287FFF", fontSize: "0.9vw", fontWeight: "800",
            width: "95%",  height: "1vw", textAlign: "left", marginTop: "1vh"
          }}>
            确认输入新密码
          </div>
          <Input.Password maxLength={20}
            autoComplete="new-password"
            style={{
              position: "relative", width: "95%", left: "0", right: "0", margin: "2.5%", height: "2vw"
            }} value={this.state.formdata.passwordconfirm}
            placeholder="确认输入您的密码" onChange={e => this.handlechange_normal("passwordconfirm", e)} />
          <br />
          <Button type="primary" onClick={this.updatePassword}
            style={{
              position: "relative", height: "2vw", fontSize: "1vw", width: "95%", left: "0",
              right: "0", margin: "auto", color: "rgb(254,209,0)"
            }}
            large><strong>修改密码</strong></Button>
          <div style={{
            backgroundColor: "", position: "relative", color: "#287FFF", fontSize: "0.9vw", fontWeight: "800",
            width: "95%",  height: "1vw", textAlign: "left", marginTop: "1vh"
          }}>
            密码要求：6-20位,不得包含'与"
          </div>
        </div>
      </div>
    )
  }
}

export default ResetPassword